import React,{useState,useEffect} from 'react'
import {Table} from 'antd'
import {get} from '@utils/request'
import {isFunction} from '@utils/base'
import './index.css'
const useFetchTableList = ({
  url,
  initData=true,
  transformResponse,
})=>{
  // 接口列表数据 , 已经翻页数据
  let [listData,setListData] = useState([])
  // let [spinning,setSpin] = useState(false)
  let [totalCount,setTotalCount] = useState(0)
  let [currentPage,setCurrentPage] = useState(1)
  let [pageSize,setPageSize] = useState(25)
  
  let [init,setInit] = useState(initData)
  useEffect(()=>{
    setInit(true)
  },[])

  const refreshListData = (params)=>{
    if(init){
      getListData({
        'currentPage': currentPage,
        'pageSize': pageSize,
        ...params,
        showMsg:false,
      })
      setInit(true)
    }
  }
  // 请求接口数据
  const getListData=(datas)=>{
    get(url,datas)
    .then(res=>{
			if(res.errorCode==0){
        let result = Array.isArray(res.result)?{data:res.result,totalCount:res.result.length,totalPage:1}:res.result
        if(isFunction(transformResponse)){
          result = transformResponse(result)
        }
        let {data=[],totalCount,totalPage} = result//res.result
        setListData([...data])
        setTotalCount(totalCount)
        setCurrentPage(datas.currentPage)
        setPageSize(datas.pageSize)
      }
  	})
  }
  return {
    listData,totalCount,pageSize,currentPage,refreshListData
  }
}
const getHeight = (query)=>{
	let node = document.querySelector(query)
  return node?.offsetHeight || 0	
}

const getTableScrollY = ()=>{
  // let bodyHeight = document.body.offsetHeight ||0
  let bodyHeight=getHeight('.ant-layout-content')-10// 数据展示主区域 减去10是因为padding-top:10px的原因
  let searchHeight = getHeight('#search-form-component') // 搜索表单的高度
  let headerHeight = getHeight('.layout-header-top-between')// 顶部header的高度
  let layoutHeight = getHeight('.layout-breadcrumb') // 面包屑导航
  let pageHeight = getHeight('.ant-pagination') // 分页器高度
  let thead = getHeight('.ant-table-header') // table thead的高度
  // 32 是分页器组件的样式margin-top:16px和margin-bottom:16px这个高度用
  // console.log(bodyHeight,'bodyHeight')
  // console.log(searchHeight,'searchHeight')
  // console.log(pageHeight,'pageHeight')
  // console.log(thead,'pageHeight')
  return bodyHeight-searchHeight-pageHeight-thead-32
}


const TableModule = props=>{
	let {
    url,
    params={},
    initData,
    columns=[],
    rowKey='id',
    transformResponse,
    ...configs
  } = props
  // url,redirectLogin,initData
  let {listData,totalCount,currentPage,refreshListData,pageSize} = useFetchTableList({
    url,
    initData,
    transformResponse,
  })
  let [scrollXY,setScrollXY] = useState({x:1000,y:(document.body.offsetHeight)})

  useEffect(()=>{
    let y = getTableScrollY()
    let x = columns.reduce((width,it)=>{
      width = width+(it.width||120)
      return width
    },0)
    setScrollXY({x:x,y:y})
  },[listData])

	const changePageSize = (current,size)=>{
    refreshListData({
      ...params,
      pageSize:size,
      currentPage:current
    })
  }
  useEffect(()=>{
    refreshListData(params)
  },[params])
	return <div>
		
		<Table 
      rowKey={rowKey}
			bordered={true}
	    scroll={scrollXY}
			dataSource={listData} 
	    size={'small'}
			columns={columns.map(it=>{
	      return {
	        dataIndex:it.key,
	        ...it
	      }
	    })}
			pagination={{
				size:'small',
				current:currentPage,
				defaultPageSize:pageSize,
				pageSize:pageSize,
				total:totalCount,
				showTotal:(total, range)=>{
					return <div>当前第<span>{currentPage}</span>页/共<span>{totalCount}</span>条记录</div>
				},
				onChange:(current, pageSize)=>{
	        changePageSize(current,pageSize)
				},
				onShowSizeChange:(current,size)=>{
	        changePageSize(current,size)
				}
			}}
      {...configs}
		/>
	</div>
}
export default TableModule